<template>
  <div>
    <!-- 插槽：
    默认插槽：
    1、在子组件中在需要自定义的地方使用<slot />占位
    2、在父组件中使用子组件时，开闭标签中间传入要自定义的结构
    
    具名插槽：
    1、在slot上使用不同的name来区分
      v-slot简写为# 
     -->

    <!-- 作用域插槽
    1、在slot上绑定属性
    2、在template标签用v-slot:插槽名="变量名"接收
     -->

    <my-dialog>
      <template #header>
        <h3>温馨提示</h3>
      </template>
      <template #content>
        <h1>我是大标题</h1>
        <h2>我是二标题</h2>
      </template>
      <!-- 作用域插槽 obj变量只能在当前template标签中使用 -->
      <template #footer="obj">
        <button>{{ obj.yes }}</button>
        <button>{{ obj.no }}</button>
      </template>
    </my-dialog>
    <my-dialog>
      <template #header>
        <h3>无情提示</h3>
      </template>
      <template #content>
        <h1>你的手机已停机</h1>
      </template>
      <template #footer>
        <button>确认</button>
      </template>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
export default {
  components: { MyDialog },

  data() {
    return {};
  },

  methods: {},
};
</script>

<style  scoped>
</style>